import 'package:flutter/material.dart';
import '/utils/setting.dart';
import '/utils/load_image.dart';

///  每一行组件，包含头像图片、文本标题、向右箭头
class RouteMenuItem extends StatelessWidget {
  final String? leftImgPath;
  final String title;
  final bool? hasBottom;
  final bool? showArrow;
  final String? rightText;
  final String? rightImgPath;
  final IconData? rightIconName;
  final Widget? customRightWidget;
  final Widget? customCenterWidget;
  final VoidCallback? onTap;

  const RouteMenuItem({
    super.key,
    this.leftImgPath, // 左侧头像图片，不传不显示
    required this.title, // 标题，必传
    this.hasBottom = true, // 每一项下方是否显示间隔线，默认显示
    this.showArrow = true, // 是否显示右侧箭头，默认显示
    this.rightText, // 右侧文字，不传不显示
    this.rightImgPath, // 右侧图片，不传不显示
    this.rightIconName, // 右侧图标，不传不显示
    this.onTap, // 点击回调
    this.customRightWidget, // 自定义的子组件，覆盖在箭头位置的，最右侧的
    this.customCenterWidget, // 自定义中间组件，覆盖在左侧文本之后的，默认不显示
  });

  @override
  Widget build(BuildContext context) {

    // 图片宽高
    double imgSize = 30.0;

    // 右侧图片大小
    double rightImgSize = 50.0;

    // 箭头左侧的图标
    Widget rightIconWidget = rightIconName == null
        ? Container()
        : Icon(rightIconName, size: 16.0, color: Colors.grey);
    
    // 箭头左侧文本，整体居右侧
    Widget rightTextWidget = rightText == null
        ? Container()
        : Text(rightText!, style: const TextStyle(fontSize: 14.0, color: Colors.grey));
    
    // 左侧的图标和文本
    Widget leftIconTextWidget = Row(
      children: [
        Visibility(
            visible: leftImgPath != null,
            child: loadImageByUrl(leftImgPath, imgSize, imgSize)
        ),
        const SizedBox(width: 10.0),
        Text(title, style: const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400)),
        // 是否显示中间的自定义组件
        customCenterWidget ?? Container()
      ],
    );
    
    // 右侧的图标和文本和箭头
    Widget rightIconTextWidget = Row(
      children: [
        // 文本
        Visibility(
          visible: rightText != null,
          child: rightTextWidget,
        ),
        // 图片
        Visibility(
          visible: rightImgPath != null,
          child: loadImageByUrl(rightImgPath, rightImgSize, rightImgSize),
        ),
        // 图标
        Visibility(
            visible: rightIconName != null,
            child: Row(
              children: [
                rightIconWidget,
                const SizedBox(width: 8.0),
              ],
            )
        ),
        // 是否显示右侧自定义组件
        customRightWidget ?? Container(),
        // 箭头图标，写法一
        Visibility(
          visible: showArrow!,
          child: const Icon(
              Icons.arrow_forward_ios_outlined,
              size: 16.0,
              color: DefaultColor.arrow
          ),
        ),
        // 写法二
        // (showArrow ?? true) ? const Icon(
        //     Icons.arrow_forward_ios_outlined,
        //     size: 16.0,
        //     color: DefaultColor.arrow
        // ) : Container()
      ],
    );

    return InkWell(
      onTap: onTap,
      child: Column(
        children: [
          Container(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  leftIconTextWidget,
                  rightIconTextWidget
                ],
              ),
            ),
          ),
          Visibility(
            visible: hasBottom!,
            child: const SizedBox(height: 8.0,)
          ),
          Visibility(
            visible: !hasBottom!,
            child: Divider(
              thickness: 1.0,
              indent: leftImgPath == null ? 4 : 50,
              endIndent: 4,
              color: DefaultColor.primary,
              height: 0,
            ),
          ),
        ],
      ),
    );
  }
}
